<template>
	<view class="container">
		<view class="container-top">
			<view class="imgs">
				<image src="../../static/img/logo2.png" class="logo"></image>
				<up-icon name="chat" size='40px' color='#fff' @click="goFn('message')"></up-icon>
				<view class="num">
					1
				</view>
			</view>
			<up-search placeholder="请输入搜索关键词" v-model="keyword" :showAction='false'></up-search>
		</view>
		<view class="content">
			<view class="img-div" v-for="(item, index) in imgList" :key="index" @click="goFn(item.path)">
				<image :src='item.url' class="shishiqingkuang"></image>
			</view>
			<view class="bingrenguahao" @click="goFn('register')">
				<image src="../../static/img/bingrenguahao.png" class="bingrenguahao"></image>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'



	const state = reactive({
		imgList: [{
				url: '../../static/img/shishiqingkuang.png',
				path: 'situation'
			},
			{
				url: '../../static/img/realtask.png',
				path: 'taskExecution'
			},
			{
				url: '../../static/img/dataam.png',
				path: 'dataAnalysis'
			},
			{
				url: '../../static/img/yuyueziyuan.png',
				path: 'reserveResources'
			},
		],
		keyword: '',
	})
	const {
		imgList,
		keyword,
	} = toRefs(state)

	onLoad( () => {
	})
	// 点击跳转
	const goFn = (path) => {
		if (path == 'message') {
			uni.navigateTo({
				url: '/pages/my/message/message'
			})
		}
		uni.navigateTo({
			url: `/pages/${path}/${path}`
		})
	}
</script>
<style scoped lang="scss">
	page {
		height: 100%;
		width: 100%;
	}

	.container {
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;

		.container-top {
			background-color: #32c9ca;
			width: 100%;
			padding: 20rpx 20rpx 60rpx 20rpx;
			box-sizing: border-box;

			.imgs {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;
				position: relative;

				.logo {
					width: 120rpx;
					height: 120rpx;
				}

				.num {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					color: #fff;
					background-color: red;
					position: absolute;
					right: 6rpx;
					top: 14rpx;
				}
			}

		}

		.content {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding: 20rpx;

			.img-div {
				width: 345rpx;
				height: 246rpx;

				.shishiqingkuang {
					width: 100%;
					height: 100%;
				}
			}

			.bingrenguahao {
				width: 710rpx;
				height: 240rpx;

				.shishiqingkuang {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>